import Card from 'antd/es/card/Card';
import { useEffect, useState } from 'react';
import { getUserByPointsRank } from '../api/user';
import { Avatar } from 'antd';

function ScoreRanks() {
  const [ranks, setRanks] = useState([]);

  useEffect(() => {
    async function fetchData() {
      const { data } = await getUserByPointsRank();
      setRanks(data);
    }
    fetchData();
  }, []);
  return (
    <div>
      <Card title="积分榜">
        {ranks.map((item, index) => {
          return (
            <div key={item._id} className="flex gap-2 my-3">
              <div className="w-6">{index + 1}</div>
              <Avatar size="small" src={<img src={item.avatar} alt="avatar" />} />
              <div className="w-60">{item.nickname}</div>
              <div className="grow text-right">{item.points}</div>
            </div>
          );
        })}
      </Card>
    </div>
  );
}

export default ScoreRanks;
